/* * @Author: 董洌淇 * @Date: 2022年6月7日10:54:00 * @Last Modified by: 董洌淇 * @Last Modified time: 2022年6月7日10:54:04 *
@Description: 首页 */
<template>
	<view class="home-box">
		<cu-custom bgColor="bg-blue">
			<block slot="content">贾汪区水质监控系统</block>
		</cu-custom>
		<view class="bg-blue flex-box">
			<view class="cu-item" v-for="(item, index) in cuIconList" :key="index">
				<text class="item-box text-white item-font" :class="'cuIcon-' + item.iconName"></text>
				<text class="item-box">{{ item.name }}</text>
				<text class="totle" v-if="item.total">{{ item.total > 99 ? '99+' : item.total }}</text>
			</view>
		</view>
		<view class="bg-white flex-box">
			<view class="cu-item" v-for="(item, index) in moduleList" :key="index" @click="goLink(item.url)">
				<text class="item-box item-font" :class="'cuIcon-' + item.iconName"></text>
				<text class="item-box">{{ item.name }}</text>
			</view>
		</view>
		<view class="margin-t-20upx bg-white">
			<view class="alarm-title padding">
				<text class="alarm-top">今日报警</text>
				<text @click="goMoreAlarmFn">
					更多
					<text class="cuIcon-right"></text>
				</text>
			</view>
			<view class="mosowe-text-scroll-row">
				<mosowe-text-scroll-row :list="list" delay="1000" :actives="chooseList" initPosition="right" @change="chooseThis1"></mosowe-text-scroll-row>
			</view>
		</view>
		<view class="bg-white margin-t-20upx padding">
			<view class="flex flex-space-between flex-align-items-center">
				<text class="font-size-32upx font-weight-600 after-title">实时数据</text>
				<text class="cuIcon-refresh font-size-32upx" @click="updateFn"></text>
			</view>
		</view>
		<view class="margin-top-sm">
			<view class="padding bg-white margin-bottom-sm" v-for="(item, index) in realTimeDataList" :key="index">
				<view>
					<view class="cart-title padding-bottom-xs flex flex-space-between flex-align-items-center">
						<text class="font-weight-600">{{ item.name }}</text>
						<view class="flex flex-align-items-center" @click="goMore(item)">
							<text class="cu-tag radius tags-text"
								:class="[item.state === 1 ? 'bg-olive' : 'bg-grey']">{{ item.state === 1 ? '正常' : '异常' }}</text>
							<text class="cuIcon-right margin-left-sm"></text>
						</view>
					</view>
					<view>{{ item.dateTime }}</view>
				</view>
				<view class="flex flex-align-items-center flex-space-between padding-top-sm cart-self">
					<view class="content-list" v-for="(items, indexs) in item.content"
						:key="indexs + Date.parse(new Date())">
						<text>{{ items.contentName }}</text>
						<text>（{{ items.contentUnit }}）</text>
						<text>{{ items.contentValue }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mosoweTextScrollRow from '@/components/mosowe-text-scroll-row/mosowe-text-scroll-row.vue';
	export default {
		name: 'home',
		components: {
			mosoweTextScrollRow
		},
		data() {
			return {
				cuIconList: [{
						iconName: 'expressman',
						name: '待分派',
						total: 120
					},
					{
						iconName: 'edit',
						name: '待处理'
					},
					{
						iconName: 'info',
						name: '处理中'
					},
					{
						iconName: 'safe',
						name: '已处理',
						total: 12
					}
				],
				moduleList: [{
						iconName: 'magic',
						name: '水质监测',
						url: 'a'
					},
					{
						iconName: 'record',
						name: '视频监测',
						url: 'b'
					},

					{
						iconName: 'flashlightopen',
						name: '入河排口',
						url: 'c'
					}
				],
				chooseList: [],
				list: ['多抽时间陪陪父母和家人', '无病无灾，亲友安康', '向女神/男神告白', '工资翻倍，工作不累', '每月看完一本书', '准点上班，按时下班'],
				realTimeDataList: []
			};
		},
		mounted() {
			this.getrealTimeDataListFn();
		},
		methods: {
			// 跳转
			goLink(url) {
				console.log(url, 'url');
			},
			// 滚动
			chooseThis1(data) {
				if (!this.chooseList.includes(data)) {
					this.chooseList.push(data);
				} else {
					this.chooseList.splice(this.chooseList.indexOf(data), 1);
				}
			},
			// 刷新
			updateFn() {
				console.log('刷新！');
			},
			// 获取实时数据
			getrealTimeDataListFn() {
				let _assemblyParams = [];
				let _array = [{
						id: 0,
						name: '如何排口（马坊桥西污水处理站）',
						dateTime: '2022-05-23 16:12:00',
						state: 1,
						cod: 43.3,
						ammoniaNitrogen: 19.23,
						phValue: 8.34,
						traffic: 0.213
					},
					{
						id: 1,
						name: '如何排口（马坊桥西污水处理站）',
						dateTime: '2022-05-23 16:12:00',
						state: 2,
						cod: 43.3,
						ammoniaNitrogen: 19.23,
						phValue: 8.34,
						traffic: 0.213
					}
				];
				if (_array && _array.length) {
					_array.forEach(item => {
						_assemblyParams.push({
							...item,
							content: [{
									contentName: 'COD',
									contentUnit: 'mg/L',
									contentValue: item.cod
								},
								{
									contentName: '氨氮',
									contentUnit: 'mg/L',
									contentValue: item.ammoniaNitrogen
								},
								{
									contentName: 'PH值',
									contentUnit: '无量纲',
									contentValue: item.phValue
								},
								{
									contentName: '瞬时流量',
									contentUnit: 'm³/s',
									contentValue: item.phValue
								}
							]
						});
					});
				}
				this.realTimeDataList = _assemblyParams;
			},
			// 跳转实时监测数据详情
			goMore(data) {
				console.log(data, '跳转实时数据详情')
				let { id } = data
				uni.navigateTo({
					url: '../dataList/realTimeData?id=' + id
				})
			},
			// 点击跳转到更多报警
			goMoreAlarmFn () {
				uni.switchTab({
					url: '../alarm/index'
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.home-box {
		position: relative;

		.cart-self view:last-child {
			border-right: none;
		}

		.cart-self {
			.content-list {
				border-right: 1px solid #f1f1f1;
				width: 25%;

				text {
					display: block;
					padding: 4upx 0 4upx;
					text-align: center;
				}
			}
		}

		.cart-title {
			text {
				display: block;
			}

			.tags-text {
				line-height: 50upx;
			}
		}

		.after-title {
			position: relative;
			display: block;
			padding-left: 50upx;

			&::before {
				content: ' ';
				width: 32upx;
				height: 32upx;
				border-radius: 50%;
				position: absolute;
				background-color: #9ccdf6;
				left: 0;
				top: 6upx;
			}

			&::after {
				content: ' ';
				width: 22upx;
				height: 22upx;
				border-radius: 50%;
				position: absolute;
				background-color: #0081ff;
				left: 6upx;
				top: 12upx;
			}
		}

		.flex-box {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 30upx 0 30upx;

			.cu-item {
				position: relative;

				.item-box {
					text-align: center;
					display: block;
				}

				.item-font {
					font-size: 26px;
				}

				.totle {
					display: block;
					width: auto !important;
					position: absolute;
					right: -20upx;
					top: -20upx;
					width: 32upx;
					height: 32upx;
					color: #fff;
					background-color: #f00101;
					border-radius: 35%;
					padding: 6upx;
					text-align: center;
				}
			}
		}

		.alarm-title {
			display: flex;
			justify-content: space-between;
			box-shadow: 0px 1px 1px #f1f1f1;

			.alarm-top {
				font-weight: bold;
				font-size: 32upx;
				position: relative;
				padding-left: 20upx;

				&:before {
					content: ' ';
					width: 4upx;
					height: 100%;
					background-color: #0081ff;
					position: absolute;
					left: 0;
					top: 0;
				}
			}
		}

		.mosowe-text-scroll-row {
			padding: 20upx 32upx 0;
		}
	}
</style>
